<!doctype html>
<html>
<head>
 <meta charset="UTF-8">
 <title>HTML5学堂 - 梦幻雪冰</title>
 <style>
    .wrap {
        width: 500px;
        height: 500px;
        border: 2px solid #f00;
        /*兼容处理*/
        display: -webkit-box;
        display: -moz-box;
        display: -ms-box;
        display: -o-box;
        display: box;
        /*规定子元素水平排列还是垂直排列*/
        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        -ms-box-orient: vertical;
        -o-box-orient: vertical;
        box-orient: vertical;
        /*水平对齐*/
        -webkit-box-align: center;
        -moz-box-align: center;
        -ms-box-align: center;
        -o-box-align: center;
        box-align: center;
        /*垂直对齐*/
        -webkit-box-pack: center;
        -moz-box-pack: center;
        -ms-box-pack: center;
        -o-box-pack: center;
        box-pack: center;
    }
    .wrap a {
        display: block;
        width: 100px;
        height: 200px;
        border: 2px solid #000;
        background-color: #fcc;
    }
 </style>
</head>
<body>
    <div class="wrap">
        <a href="###" title="">HTML5学堂 - 陈能堡</a>
        <a href="###" title="">HTML5学堂 - 陈能堡</a>
    </div>
</body>
</html>